<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>
	<script>
		var statusHeight = STATUSBAR_HEIGHT + 44;
		var styleObj = document.createElement('style');
		styleObj.type = 'text/css';
		styleObj.innerHTML = ".status-bar-height{height:" + statusHeight + "px}";
		document.getElementsByTagName('HEAD').item(0).appendChild(styleObj);
	</script>
	<style>
		body{
			background-color: #eee;
		}
.xuqiu-item {
			margin: 5px 15px;
		}
		
		.xuqiu-item-con {
			background-color: #fff;
			border-radius: 5px;
			padding: 10px;
			border-right: #eac956 5px solid;
			margin-bottom: 15px;
			position: relative;
		}
		
		.xuqiu-item-con img {
			position: absolute;
			left: 10px;
			top: 10px;
			width: 80px;
		}
		
		.xuqiu-item-con .text {
			margin: 0 0 0 90px;
		}
		
		.xuqiu-item-time {
			text-align: center;
			margin-bottom: 3px;
		}
		
		.xuqiu-item-time span {
			font-size: 12px;
			color: #eee;
			background-color: rgba(0, 0, 0, .2);
			border-radius: 3px;
			padding: 2px 8px;
		}
		.xuqiu-item-mask {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(104, 104, 104, 0.6);
			color: #fff;
			border-radius: 5px 0 0 5px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>

	<body>

		<div id="app">

			<div class="xiaoyi-header header-red" id="header">
				<div class="xiaoyi-header-left"><i class="iconfont icon-back " onclick="wsClose()"></i></div>
				<div class="xiaoyi-header-title">我发布的需求
				</div>
				<!--<div class="xiaoyi-header-right"><span style="margin: 10px 10px 0 0 ; display: block;" @click="onSubmit">搜索</span></div>-->
			</div>
			<div class="status-bar-height"></div>
			
			
			
			<template v-for="(vo,index) in items">
					<div class="xuqiu-item">
						<div class="xuqiu-item-time"><span>{{vo.time}}</span></div>
						<div class="xuqiu-item-con" style="min-height: 100px;" v-if="vo.picture_id!=0">
							<img :src="v+'@!200x200'" @click='show(vo.pics,vo.desc)' v-for="(v,index) in vo.pics" v-if="index < 1">
							<div class="text">
								{{vo.desc}} 
							</div>
							<div class="xuqiu-item-mask" v-if="vo.status==4">已解决</div>
						</div>
						<div class="xuqiu-item-con" v-else>
							{{vo.desc}}
							<div class="xuqiu-item-mask" v-if="vo.status==4">已解决</div>
						</div>
					</div>

				</template>
				
				<template v-if="loading == 'inits'">
					<div flex="main:center cross:center" style="width:100%; height: 400px; ">
						<div class="jushi-loader">Loading...</div>
					</div>
				</template>

				<template v-if="loading == 'nodata'">
					<div flex="main:center cross:center" style="width:100%; height: 400px; ">
						<img src="images/nodata.png" style="width: 150px;">
					</div>
				</template>

				<template v-if="loading == 'more'">
					<div class="weui-loadmore">
						<i class="weui-loading"></i>
						<span class="weui-loadmore__tips">加载更多</span>
					</div>
				</template>

				<template v-if="loading == 'more_nodata'">
					<div class="weui-loadmore weui-loadmore_line">
						<span class="weui-loadmore__tips" style="background: #eee;">没有啦</span>
					</div>
				</template>
			
			
			
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {
				var vm = new Vue({
					el: "#app",
					data: {
						items: [],
						loading: 'inits',
						k: '',
						p: 1,
						r: 20
					},
					mounted: function() {
						this.inits();
					},
					methods: {
						inits: function() {
							var vm = this;

							Get(SERVER_URL + "&c=Zhaohuo&a=zhaohuoMy", {
								p: 1,
								r: vm.r
							}, function(data) {
								if(data.status) { 
									vm.items = data.info; 
									log(vm.items)
									if(data.info.length < 5){
										vm.loading = 'noshow';
									}else{
										vm.loading = 'more';
									}
									vm.p = 2;
									
								} else {
									vm.loading = 'nodata';
								}
							})

							$('.main-body').infinite(150).on("infinite", function() {
								var self = this;
								if(self.loading) return;
								self.loading = true;

								Get(SERVER_URL + "&c=Zhaohuo&a=zhaohuoMy", {
									p: vm.p,
									r: vm.r,
								}, function(data) {
									if(data.status) {
										for(var i in data.info) {
											vm.items.push(data.info[i]);
										}
										vm.p++;
										self.loading = false;
									} else {
										vm.loading = 'more_nodata';
										self.loading = false;
									}

								})

							});

							$('.main-body').scroll(function() {
								var scrollTop = $(this).scrollTop();
								if(scrollTop > 1500) {
									$("#toTop").show();
								} else {
									$("#toTop").hide();
								}
							});

						},
						show: function(pics,text) {
							Smarge.set('GoodsInfo', {pics:pics,text:text});
							clicked('pic_show.html', 'zoom-fade-out'); 
						}
					}
				})

			});
		</script>
	</body>

</html>